<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const statusList = [
  { label: "停用", value: "0" },
  { label: "启用", value: "1" }
];
const ruleForm = reactive({
  name: "",
  status: "",
  number: ""
});
const ruleFormRef = ref("");
const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
};
const tableData1 = reactive([
  {
    name: "张三",
    phone: "13812345678",
    status: "1",
    identity: "总经理",
    role: ["管理员", "财务经理", "财务", "人力"],
    lastLogin: "2024-03-01 12:00:00"
  },
  {
    name: "李四",
    phone: "13812345678",
    status: "0",
    identity: "财务经理",
    role: ["财务经理", "财务", "人力"],
    lastLogin: "2024-03-01 12:00:00"
  },
  {
    name: "王五",
    phone: "13812345678",
    status: "1",
    identity: "财务",
    role: ["财务", "人力"],
    lastLogin: "2024-03-01 12:00:00"
  }
]);
const columns = [
  {
    type: "selection",
    align: "left"
  },
  {
    align: "center",
    label: "姓名",
    prop: "name",
    showOverflowTooltip: true,
    width: "200px"
  },
  {
    align: "center",
    label: "联系电话",
    prop: "phone"
  },
  {
    align: "center",
    label: "身份",
    prop: "identity"
  },
  {
    align: "center",
    label: "关联角色",
    prop: "role",
    showOverflowTooltip: true,
    width: "200px"
  },
  {
    align: "center",
    label: "状态",
    slot: "status"
  },
  {
    align: "center",
    label: "最近登录",
    prop: "lastLogin",
    width: "200"
  },
  {
    label: "操作",
    slot: "operation",
    width: 170
  }
];
const delClick = (row, index) => {
  ElMessageBox.confirm(`是否删除用户人员:【${row.name}】?`, "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      tableData1.splice(index, 1);
      pagination.total--;
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除"
      });
    });
};
/** 分页配置 */
const pagination = reactive({
  pageSize: 10,
  currentPage: 1,
  pageSizes: [10, 15, 20],
  total: tableData1.length,
  align: "right",
  background: true,
  small: false
});
const multipleSelection = ref([]);
const handleSelectionChange = val => {
  multipleSelection.value = val;
};
const dialogRef = ref();
const submitClick = row => {
  if (!(tableIndex.value === "")) {
    tableData1[tableIndex.value] = row;
  } else {
    console.log(row);
    tableData1.push(row);
    pagination.total++;
  }
};
const tableIndex = ref();
// import dialogInfo from "./dialogInfo.vue";
</script>

<template>
  <el-card class="!m-[20px]">
    <el-form label-width="80px" inline ref="ruleFormRef" :model="ruleForm">
      <el-form-item label="角色名" prop="name">
        <el-input
          v-model="ruleForm.name"
          placeholder="请输入角色名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="number">
        <el-input
          v-model="ruleForm.number"
          placeholder="请输入联系电话"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="ruleForm.status"
          clearable
          placeholder="请选择状态"
          style="width: 150px"
        >
          <el-option
            v-for="item in statusList"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-button type="primary">查询</el-button>
    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    <el-button
      type="primary"
      @click="
        () => {
          dialogRef.init('', '新增人员');
          tableIndex = '';
        }
      "
      >新增</el-button
    >
    <el-button :disabled="!multipleSelection.length">导出</el-button>

    <pure-table
      class="mt-[20px]"
      :data="tableData1"
      :columns="columns"
      stripe
      border
      :header-cell-style="{
        textAlign: 'center',
        background: '#f5f7fa'
      }"
      :pagination="pagination"
      @selection-change="handleSelectionChange"
    >
      <template #status="{ row }">
        <el-tag :type="row.status === '1' ? 'success' : 'danger'">{{
          row.status == 1 ? "启用" : "禁用"
        }}</el-tag>
      </template>
      <template #operation="{ row, index }">
        <el-button
          type="primary"
          link
          @click="
            () => {
              dialogRef.init(row, '人员编辑');
              tableIndex = index;
            }
          "
          >编辑</el-button
        >
        <el-button
          type="primary"
          link
          @click="
            () => {
              dialogRef.init(row, '人员详情');
              tableIndex = index;
            }
          "
          >详情</el-button
        >
        <el-button
          type="danger"
          link
          v-if="row.status == '0'"
          @click="delClick(row, index)"
          >删除</el-button
        >
      </template>
    </pure-table>
  </el-card>
  <dialogInfo ref="dialogRef" @submit="submitClick" />
</template>

<style lang="scss" scoped></style>
